<template>
	<view class="content">
		<view class="time">
			<text>选择开始时间和结束时间</text>
			<view class="time-list">
				<view v-if="!from.startDate">
					<u-icon name="calendar-fill" color="#87ceeb" size="55"></u-icon>
					<!-- <view @tap="showPicker">选择开始时间和结束时间</view> -->
					<view @click="showcalendar = true">选择开始时间和结束时间</view>
				</view>
				<view v-if="from.startDate" @tap="showPicker">
					<u-icon name="calendar-fill" color="#87ceeb" size="55"></u-icon>
					<view class="time-display">
						<text>{{ from.startDate }} 到 {{ from.endDate }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 日历 -->
		<u-calendar :show="showcalendar" :mode="mode" rowHeight="100" @confirm="confirm"></u-calendar>
		<view class="cameraman">
			<text class="cameraman-text">旅行人数</text>
			<view class="box">
				<uni-section class="uni-section" type="line">
					<uni-data-select v-model="from.peopleNumber" :localdata="range"
						@change="cityChange"></uni-data-select>
				</uni-section>
			</view>
		</view>

		<!-- 选择准确时间 -->
		<!-- <date-time-range-picker :visible="pickerVisible" :initialStartDateTime="from.startDate"
			:initialEndDateTime="from.endDate" @confirm="onConfirm" @cancel="onCancel" /> -->

		<view class="vertical-selector">
			<view class="selector-title">请选择司机摄影师导游的类型</view>
			<view v-for="(item, index) in typelist" :key="index" class="selector-option"
				:class="{ 'selected': typeIndex === index }" @click="selecttype(index, item.dictValue)">
				<text class="option-text">{{ item.remark }}</text>
				<text v-if="typeIndex === index" class="check-icon">✓</text>
			</view>
		</view>
		<view v-if="from.orderType == '1' || from.orderType =='2'">
			<view class="photographer">
				<view class="gender-label">是否需要摄影师</view>
				<view class="needphotographer">
					<view v-for="item,index in needphotographerList" :key="index"
						:class="{active:needphotographerIndex == index}" @click="getneedphotographer(index,item)">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="photographer" v-if="from.needCameraman==0">
				<view class="gender-selector">
					<view class="gender-label">摄影师性别</view>
					<view class="gender-cards">
						<view class="gender-card" :class="{ 'selected': from.cameramanSex === 'female_photography' }"
							@tap="selectGender('female_photography')">
							<text class="crown">👑</text>
							<u-icon name="woman" size="30"
								:color="from.cameramanSex === 'female_photography' ? '#fff' : '#FFC0CB'"></u-icon>
							<text>女摄影师</text>
						</view>
						<view class="gender-card" :class="{ 'selected': from.cameramanSex === 'male_photography' }"
							@tap="selectGender('male_photography')">
							<u-icon name="man" size="30"
								:color="from.cameramanSex === 'male_photography'  ? '#fff' : '#87CEEB'"></u-icon>
							<text>男摄影师</text>
						</view>
					</view>
				</view>
			</view>

			<view class="cameraman" v-if="from.needCameraman==0">
				<text class="cameraman-text">摄影师类型</text>
				<view class="box">
					<view class="picture" v-for="(item,index)  in cameraman" :key="index"
						:class="{active:cameramanIndex == index,grayed: index !== cameramanIndex }"
						@click="cameramanCard(index,item.dictValue)">
						<text>{{item.dictLabel}}</text>
					</view>
				</view>
			</view>

			<view class="Shooting" v-if="from.needCameraman==0">
				<view class="Shooting-text">
					<text>拍摄方式</text>
					<text>(默认五十张)</text>
				</view>
				<view class="box">
					<view class="picture" v-for="(item,index)  in wayRange" :key="index"
						:class="{active:activeIndex == index,grayed: index !== activeIndex }"
						@click="selectCard(index,item.dictValue)">
						<image src="../../../static/images/index/1.png" mode="widthFix"></image>
						<text>{{item.dictLabel}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="photographer">
			<view class="gender-label">是否需要司机</view>
			<view class="needphotographer">
				<view v-for="item,index in cityList" :key="index" :class="{active:needphotographerIndex == index}"
					@click="getdriver(index,item)">
					{{item.name}}
				</view>
			</view>
		</view>



		<view class="vertical-selector">
			<view class="selector-title">请选择包车</view>
			<view v-for="(item, index) in filteredOptions" :key="index" class="selector-option"
				:class="{ 'selected': selectedIndex === index }" @click="selectOption(index, item.dictValue)">
				<text class="option-text">{{ item.dictLabel }}</text>
				<text v-if="selectedIndex === index" class="check-icon">✓</text>
			</view>
		</view>

		<view class="cameraman">
			<text class="cameraman-text">是否包含门票</text>
			<view class="box">
				<view class="admission" v-for="(item, index) in feeList" :key="index">
					<switch color="#87ceeb" style="transform:scale(0.8)" :checked="item.checked" size="20"
						:disabled="isDisabled(index)" @change="(e) => switchChange(e, index)" />
					<text>{{item.dictLabel}}</text>
				</view>
			</view>
		</view>

		<view class="cameraman">
			<text class="cameraman-text">是否包含住宿</text>
			<view class="box">
				<radio-group @change="radioChange" class="radio-group">
					<label v-for="(item, index) in stayList" :key="index" class="radio-label">
						<radio :value="item.dictValue" :checked="item.dictValue == from.containStay" color="#87CEFA"
							class="radio" style="transform:scale(0.8)" />
						<text
							:class="['radio-text', { 'selected': item.dictValue == from.containStay }]">{{item.dictLabel}}</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="pace">
			<button @click="goBack()">总计：{{totalAmount}}元</button>
			<button @click="goTravelChoice()">支付</button>
		</view>
	</view>
</template>

<script>
	import DateTimeRangePicker from '@/components/DateTimePicker.vue'
	export default {
		data() {
			const now = new Date();
			return {
				pathId: 0,
				wayRange: [],
				activeIndex: 0,
				cameraman: [],
				cameramanIndex: 0,
				selectedIndex: 0,
				totalAmount: 0,
				options: [],
				selectedIndex: 0,
				from: {
					pathId: 0, //推荐路线id
					cameramanSex: 'male_photography', //摄影师性别
					shootingMethod: 'truing', // 拍摄方式
					cameramanType: 'senior_photographer', //摄影师类型
					carType: 'five_seats', //车辆类型
					containTickets: 0, //0包含 1不包含 是否包含门票
					needCameraman: 0, //是否需要摄影师
					containStay: 0, //0住宿 1不住宿
					peopleNumber: 1, //人数
					startDate: '', //开始时间
					endDate: '', //结束时间
					orderType: 1, //订单类型
				},
				// range: ['请选择', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				range: [{
						value: 1,
						text: '1人'
					},
					{
						value: 2,
						text: '2人'
					},
					{
						value: 3,
						text: '3人'
					},
					{
						value: 4,
						text: '4人'
					},
					{
						value: 5,
						text: '5人'
					},
				],
				cityday: '请选择',
				feeList: [{
						dictLabel: '包含门票',
						dictValue: 0,
						checked: true,
					},
					{
						dictLabel: '不包含门票',
						dictValue: 1,
						checked: false,
					}
				],
				stayList: [{
						dictLabel: '包含住宿',
						dictValue: 0,
						checked: true,
					},
					{
						dictLabel: '不包含住宿',
						dictValue: 1,
						checked: false,
					}
				],
				needphotographerList: [{
						name: '需要摄影师',
						value: 0
					},
					{
						name: '不需要摄影师',
						value: 1
					}
				],
				cityList: [{
						name: '需要司机',
						value: 0
					},
					{
						name: '不需要司机',
						value: 1
					}
				],
				needphotographerIndex: 0,
				typeIndex: 0,
				typelist: [],
				pickerVisible: false,
				number: 40, //基础照片数量
				showcalendar: false,
				mode: 'range'
			};
		},
		computed: {
			filteredOptions() {
				if (this.from.cameramanSex == 'female_photography' || this.from.orderType == '2' || this.from.orderType ==
					'3') {
					return this.options.filter(option => option.dictValue != 'no_package_car');
				}
				return this.options;
			},
		},
		components: {
			DateTimeRangePicker
		},
		methods: {
			// 跳转到订单页面
			goTravelChoice() {
				if (!this.from.startDate) {
					this.$u.toast('请选择游玩时间')
				} else {
					const from = encodeURIComponent(JSON.stringify(this.from))
					uni.navigateTo({
						url: `/packagesIndex/pages/calculation/calculation?from=${from}`
					})
				}
			},
			// 获取总价格
			async getuserPlancountAmount() {
				let res = await this.$u.api.getuserPlancountAmount(this.from)
				if (res.code == 200) {
					this.totalAmount = res.data.totalAmount
				}
			},
			// 选择人数
			cityChange(e) {
				console.log(e);
				// const peopleNumber = e.detail.value == 0 ? '请选择' : e.detail.value;
				// this.from.peopleNumber = Number(peopleNumber)
			},
			// 选择天数
			citydayChange(e) {
				this.cityday = e.detail.value == 0 ? '请选择' : e.detail.value + '天';
			},
			// 选择门票
			switchChange(e, index) {
				this.feeList[index].checked = e.detail.value;
				this.from.containTickets = index;
				console.log(this.from.containTickets);
				// 如果当前选项被选中，禁用其他选项
				if (e.detail.value) {
					this.feeList.forEach((item, i) => {
						if (i !== index) {
							item.checked = false;
						}
					});
				}
			},
			isDisabled(index) {
				// 实现禁用逻辑（如果需要的话）
				return false;
			},
			// 获取选择司机摄影师导游的类型
			async gettype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'order_type'
				})
				if (res.code == 200) {
					this.typelist = res.data;
				}
			},

			// 获取拍摄方式数据
			async getdictdatatype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'shooting_method'
				})
				if (res.code == 200) {
					this.wayRange = res.data
					console.log('this.wayRange', this.wayRange);
				}
			},
			// 获取摄影师类型数据
			async getcameramantype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'cameraman_type'
				})
				if (res.code == 200) {
					this.cameraman = res.data
					console.log('this.cameraman', this.cameraman);
				}
			},

			// 获取车辆数据
			async getacrtype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'car_type'
				})
				if (res.code == 200) {
					this.options = res.data;
					this.updateCarSelection();
				}
			},
			// 选择是否需要摄影师
			getneedphotographer(index, item) {
				this.needphotographerIndex = index
				this.from.needCameraman = item.value
			},

			// 选择类型
			selecttype(index, dictValue) {
				this.typeIndex = index;
				this.from.orderType = dictValue;
				if (dictValue == '2' || dictValue == '3') {
					this.$u.toast('当前订单类型不允许选择不包车!');
					if (this.from.carType == 'no_package_car') {
						const fiveSeatsOption = this.filteredOptions.find(option => option.dictValue == 'five_seats');
						if (fiveSeatsOption) {
							this.selectOption(this.filteredOptions.indexOf(fiveSeatsOption), 'five_seats');
						}
					}
				}
				this.getuserPlancountAmount();
			},
			// 选择车辆类型
			selectOption(index, dictValue) {
				if ((this.from.orderType == '2' || this.from.orderType == '3') && dictValue == 'no_package_car') {
					this.$u.toast('当前订单类型不允许选择不包车!');
					return;
				}
				this.selectedIndex = this.filteredOptions.findIndex(option => option.dictValue == dictValue);
				this.from.carType = dictValue;
				this.getuserPlancountAmount();
			},
			// 选择性别
			selectGender(gender) {
				this.from.cameramanSex = gender;
				if (gender == 'female_photography') {
					this.$u.toast('选择女摄影师必须包车哦！')
					if (this.from.carType == 'no_package_car') {
						// 如果之前选择的是"不包车"，现在自动选择"五座车"
						const fiveSeatsOption = this.options.find(option => option.dictValue == 'five_seats');
						if (fiveSeatsOption) {
							this.selectOption(this.options.indexOf(fiveSeatsOption), 'five_seats');
						}
					}
					this.getuserPlancountAmount();
				}
			},

			// 更新车辆选择
			updateCarSelection() {
				if (this.from.cameramanSex == 'female_photography') {
					// 如果选择的是女摄影师，且当前选择是"不包车"，则默认选择五座车
					if (this.from.carType == 'no_package_car') {
						const fiveSeatsIndex = this.filteredOptions.findIndex(option => option.dictValue ==
							'five_seats');
						if (fiveSeatsIndex != -1) {
							this.selectOption(fiveSeatsIndex, 'five_seats');
						}
					}
				}
			},
			// 选择司机
			getdriver(index, item) {
				console.log(index, item);
			},
			// 选择摄影师类型
			cameramanCard(index, dictValue) {
				this.cameramanIndex = index;
				this.from.cameramanType = dictValue
				this.getuserPlancountAmount()
			},
			// 选择拍摄方式
			selectCard(index, dictValue) {
				this.activeIndex = index;
				this.from.shootingMethod = dictValue
				console.log('shootingMethod', dictValue);
				this.getuserPlancountAmount()
			},
			// 选择是否包含住宿
			radioChange(e) {
				this.from.containStay = e.detail.value;
				// this.from.containStay = this.stayList.findIndex(item => item.dictValue === value);
			},
			showPicker() {
				this.pickerVisible = true
			},
			onConfirm(dateTimeRange) {
				this.from.startDate = dateTimeRange.startDateTime || ''
				this.from.endDate = dateTimeRange.endDateTime || ''
				this.pickerVisible = false
			},
			onCancel() {
				this.pickerVisible = false
			},
			// 查询基础照片数量
			async getconfigKey() {
				let res = await this.$u.api.getconfigKey({
					configKey: 'photo_num'
				})
				if (res.code == 200) {
					this.number = Number(res.msg)
				}
			},
			// 选择日期
			confirm(e) {
				this.from.startDate = e[0]
				const index = e.length - 1
				this.from.endDate = e[index]
				this.showcalendar = false
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getdictdatatype();
			this.getacrtype();
			this.getcameramantype();
			this.gettype()
			this.getconfigKey()
			this.from.pathId = options.id;
			setTimeout(() => {
				this.getuserPlancountAmount();
				// Initialize selected car option
				const initialCarOption = this.filteredOptions[0];
				if (initialCarOption) {
					this.selectOption(0, initialCarOption.dictValue);
				}
			}, 500);
			uni.hideLoading()
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding-bottom: 130rpx;
		font-size: 28rpx;

		// 时间选择器
		.time {
			align-items: center;
			padding: 10rpx 30rpx;
			box-sizing: border-box;

			text {
				font-weight: 700;
			}

			.time-list {
				padding: 20rpx 0 0 0;
				box-sizing: border-box;

				view {
					display: flex;
					align-items: center;

					view {
						color: #242424;
					}
				}
			}
		}


		// 摄影
		.photographer {
			padding: 30rpx 40rpx;

			.needphotographer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0 0 0;
				box-sizing: border-box;

				view {
					flex: 1;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					border: 1rpx solid #87CEEB;
					border-radius: 40rpx;
					color: #87CEEB;
					font-size: 27rpx;

					&:nth-child(1) {
						margin-right: 20rpx;
					}

					&.active {
						background-color: #87CEEB;
						color: #fff;
					}
				}

			}

			.gender-selector {}

			.gender-label {
				margin-bottom: 10px;
				font-weight: 700;
			}

			.gender-cards {
				font-family: Arial, sans-serif;
				display: flex;
				justify-content: space-between;
			}

			.gender-card {
				width: 45%;
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				position: relative;
				font-size: 18px;
			}

			.gender-card:not(.selected) {
				background-color: #FFFFFF;
			}

			.gender-card.selected {
				color: #FFFFFF;
			}

			.gender-card:nth-child(1):not(.selected) {
				color: #FFC0CB;
				border: 1px solid #FFC0CB;
			}

			.gender-card:nth-child(2):not(.selected) {
				color: #87CEEB;
				border: 1px solid #87CEEB;
				border: 1px solid #87CEEB;
			}

			.gender-card:nth-child(1).selected {
				background-color: #FFC0CB;
			}

			.gender-card:nth-child(2).selected {
				background-color: #87CEEB;
			}

			.crown {
				position: absolute;
				top: 5px;
				left: 5px;
				font-size: 20px;
			}
		}


		// 拍摄方式
		.Shooting {
			width: 99%;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.Shooting-text {
				display: flex;
				align-items: center;
				padding: 15rpx 0;
				box-sizing: border-box;

				text {
					&:nth-child(1) {
						font-weight: 700;
					}

					&:nth-child(2) {
						font-size: 20rpx;
					}
				}
			}

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.picture {
					width: 320rpx;
					margin: 20rpx 0;
					position: relative;

					image {
						width: 100%;
						border-radius: 20rpx;
					}

					text {
						position: absolute;
						top: 0;
						left: 0;
						display: block;
						width: 100%;
						padding: 10rpx;
						box-sizing: border-box;
						background-color: rgba(128, 128, 128, 0.5);
						border-radius: 20rpx 20rpx 0 0;
						text-align: center;
						color: #FFFFFF;
					}

					&.active {
						background-color: rgba(255, 255, 255, 0.7);
					}

					&.grayed {
						opacity: 0.5;
					}
				}
			}
		}

		// 选择人数 门票
		// .boxcameraman {
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;

		// 	.cameraman {
		// 		width: 99%;
		// 		padding: 10rpx 40rpx;
		// 		box-sizing: border-box;

		// 		.cameraman-text {
		// 			font-weight: 700;
		// 		}

		// 		.box {
		// 			display: flex;
		// 			align-items: center;
		// 			justify-content: space-between;

		// 			.radio-group {
		// 				display: flex;
		// 				align-items: center;
		// 				justify-content: space-between;
		// 			}

		// 			.picture {
		// 				width: 320rpx;
		// 				margin: 20rpx 0;
		// 				border-radius: 50rpx;
		// 				text-align: center;
		// 				color: #000000;
		// 				padding: 20rpx 0;
		// 				box-sizing: border-box;

		// 				&.active {
		// 					background-color: #87CEEB;
		// 					color: #FFFFFF;
		// 					text-align: center;
		// 				}
		// 			}
		// 		}
		// 	}
		// }


		//  选择人数 门票
		.cameraman {
			width: 99%;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.cameraman-text {
				font-weight: 700;
			}

			.box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.uni-section {
					width: 100%;
					margin: 30rpx 0;
				}

				.radio-group {
					width: 95%;
					margin: 20rpx 20rpx 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.admission {
					margin: 20rpx 0;
				}

				.picture {
					width: 320rpx;
					margin: 20rpx 0;
					border-radius: 50rpx;
					text-align: center;
					color: #000000;
					padding: 20rpx;
					box-sizing: border-box;
					font-size: 26rpx;

					&.active {
						background-color: #87CEEB;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
		}


		$primary-color: #1890ff;
		$text-color: #333;

		// 选择包车 选择司机摄影的类型
		.vertical-selector {
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.selector-title {
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
				color: $text-color;
			}

			.selector-option {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx - 2rpx;
				box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&.selected {
					background-color: lighten($primary-color, 35%);
					border: 2rpx solid $primary-color;
				}

				.option-text {
					font-size: 28rpx;
					color: $text-color;
				}

				.check-icon {
					color: $primary-color;
					font-size: 32rpx;
				}
			}
		}

		.pace {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0rpx;
			z-index: 999;

			button {
				flex: 1;

				&:nth-child(1) {
					color: #000000;
					background-color: #fff;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
				}

				&:nth-child(2) {
					color: #ffffff;
					background-color: #1890ff;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>